<template>
  <div>
            <!-- 面包屑 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>商品管理</el-breadcrumb-item>
         <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>

       <!-- 卡片视图区-->
       <el-card>
           <el-row>
               <el-col>
                   <el-button  type="primary"  @click="showAddCateDialog">添加分类</el-button>
               </el-col>
           </el-row>
           
           <!-- 表格-->

           <tree-table class="treeTable" :data="catalist" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border :show-row-hover="false">
               <!-- 是否有效-->
               <template  v-slot:isok="scope">
                   <i class="el-icon-check" v-if="scope.row.cat_deleted === false" style="color:lightgreen;"></i>
                   <i class="el-icon-close" v-else style="color:red"></i>
               </template>

               <!-- 排序 -->
               <template v-slot:order="scope">
                   <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                   <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
                   <el-tag size="mini" type="warning" v-else>三级</el-tag>
               </template>

                <!-- 操作 -->
                <template v-slot:opt="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="editCate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteCate(scope.row.cat_id)">删除</el-button>
                </template>

           </tree-table>

           <!-- 分页区-->
               <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="querInfo.pagenum"
                :page-sizes="[3, 5, 10, 15]"
                :page-size="querInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
    </el-pagination>

       </el-card>

       <!-- 添加分类的对话框-->
       <el-dialog
       title="添加分类"
       :visible.sync="addCateDialogVisible"
        width="50%"
        @close="addCateDialogClosed">

         <!-- 添加分类的表单-->
       <el-form :model="addCateForm" :rules="addCateFormrules" ref="addCateFormRef" label-width="100px" >
       <el-form-item label="分类名称" prop="cat_name">
       <el-input v-model="addCateForm.cat_name"></el-input>
       </el-form-item>

         <!-- options配置数据源-->
         <!-- props指定配置对象-->
       <el-form-item label="父级分类" >
             <el-cascader v-model="selectedKeys"  :options="parentCateList" :props="{ expandTrigger: 'hover',value:'cat_id',label:'cat_name',children:'children' }"  @change="parcenrCateChanged" checkStrictly:true></el-cascader>
       </el-form-item>
       </el-form>


       <span slot="footer" class="dialog-footer">
       <el-button @click="addCateDialogVisible = false">取 消</el-button>
       <el-button type="primary" @click="addCate">确 定</el-button>
       </span>
       
      </el-dialog>

      <!-- 编辑分类的对话框-->
      <el-dialog
       title="提示"
      :visible.sync="editCateDialogVisible"
       width="30%">
        <el-form :model="editCatemessage" :rules="addCateFormrules" ref="editCateFormRef" label-width="100px" >
       <el-form-item label="修改名称" prop="cat_name">
       <el-input v-model="editCatemessage.cat_name"></el-input>
       </el-form-item>
       </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="editCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addEditCate">确 定</el-button>
    </span>
</el-dialog>
  </div>
</template>

<script>
export default {
    name:'',
    data() {
        return {
            //查询条件
            querInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },

            //商品分类的数据列表,默认为空
            catalist:[],

            //总数据条数
            total:0,

            //为table指定列的定义
            columns:[{
                label:'分类名称',
                prop:'cat_name'
            },{
                label:'是否有效',
                //表示将当前列定义为模板列
                type:'template',
                //表示当前这一列使用的模板名称
                template:'isok'
            },{
                 label:'排序',
                //表示将当前列定义为模板列
                type:'template',
                //表示当前这一列使用的模板名称
                template:'order'
            },
            {
                label:'操作',
                //表示将当前列定义为模板列
                type:'template',
                //表示当前这一列使用的模板名称
                template:'opt'
            }
            ],

            //控制添加对话框的显示与隐藏
            addCateDialogVisible:false,

            //添加表单的数据
            addCateForm:{
                //将要添加的名称
                cat_name:'',
                //分类的id
                cat_pid:0,
                //分类的等级，默认一级
                cat_level:0
            },

            //添加分类表单的验证规则
            addCateFormrules:{
                cat_name:[{ required: true, message: '请输入分类的名称', trigger: 'blur' },]
            },
            //父级分类的空列表
            parentCateList:[],
            selectedKeys:[],

            //控制编辑对话框的打开
            editCateDialogVisible:false,

            //接收到的修改内容的信息
            editCatemessage:{}

        }
    },
    created() {
        this.getCateList()
    },
    methods:{
       async getCateList(){
         const{data:res}=await   this.$http.get('categories',{params:this.querInfo})
            if(res.meta.status!==200){
                  return  this.$message.error('获取商品分类失败')
                }
                //把数据列表赋值给catalist
                this.catalist=res.data.result
                this.total=res.data.total
        },
        //监听pagessize的改变
        handleSizeChange(newSize){
            this.querInfo.pagesize=newSize
            this.getCateList()
        },
        //监听pagenum的改变
        handleCurrentChange(newPage){
            this.querInfo.pagenum=newPage
            this.getCateList()
        },

        //点击按钮添加分类的对话框
        showAddCateDialog(){
            //获取父级分类，再展示对话框
            this.getParentCateList()
            this.addCateDialogVisible=true
        },

        //获取父级分类的数据列表
       async getParentCateList(){
         const{data:res} = await   this.$http.get('categories',{params:{type:2}})
          if(res.meta.status!==200){
                  return  this.$message.error('获取父级分类分类失败')
                }
                this.parentCateList=res.data
        },

        //选项发生变化触发这个函数
        parcenrCateChanged(){
            //如果selectedKeys数组中的length大于0，证明选中的父级分类
            //反之，就说明没有选中任何父级分类
            if(this.selectedKeys.length>0){
                this.addCateForm.cat_pid=this.selectedKeys[
                    this.selectedKeys.length-1
                ]
                //为当前分类的等级赋值
                this.addCateForm.cat_level=this.selectedKeys.length
                return
            }else{
                //父级分类的Id
                this.addCateForm.cat_pid=0
                //为当前分类的等级赋值
                this.addCateForm.cat_level=0
            }
        },

        //点击按钮添加新的分类
        addCate(){
            this.$refs.addCateFormRef.validate(async valid =>{
                if(!valid) return
                const {data:res} = await this.$http.post('categories',this.addCateForm)
                 if(res.meta.status!==201){
                  return  this.$message.error('添加分类失败')
                }
                this.$message.success('添加分类成功')
                this.getCateList()
                this.addCateDialogVisible=false
            })
        },

        //监听对话框的关闭事件，重置表单
        addCateDialogClosed(){
            this.$refs.addCateFormRef.resetFields()
            this.selectedKeys=[]
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0
        },

        //打开编辑对话框
       async editCate(cateInfo){
            const {data:res}=await this.$http.get('categories/'+cateInfo.cat_id)
            if(res.meta.status!==200){
                  return  this.$message.error('获取信息失败')
                }
            this.editCatemessage=res.data
            this.editCateDialogVisible=true
        },

        //提交编辑的信息
        addEditCate(){
            this.$refs.editCateFormRef.validate(async valid=>{
                if(!valid) return
                const {data:res} = await this.$http.put('categories/'+this.editCatemessage.cat_id,{cat_name:this.editCatemessage.cat_name})
                if(res.meta.status!==200){
                  return  this.$message.error('更新信息失败')
                }
                this.$message.success('更新信息成功')
                this.getCateList()
                this.editCateDialogVisible=false
            })
        },

        //删除商品的分类
       async deleteCate(id){
         const confirmResult= await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
            }
          ).catch(err=>{
              return err
          })

          //如果用户确认删除,返回confirm
          //如果用户确认删除,返回cancel
          if(confirmResult !== 'confirm'){
              return this.$message.info('已取消删除')
          }

          const {data:res} = await this.$http.delete('categories/'+ id)
                if(res.meta.status!==200){
                  return  this.$message.error('删除商品失败')
                }
                this.$message.success('删除商品成功')
                this.getCateList()
        }
    }
}
</script>

<style>
.treeTable{
    margin-top: 15px;
}
</style>